<template>
  <div>
    <FoorX></FoorX>
    <TopBack textContent="阿拉粉心得"></TopBack>
    <div class="exBox">
      <div class="xdNavBox flex b-b-1">
        <div class="xdNavL flex" @click="setXdNavFalg(true)">
          <div class="xdNavLText flex" :class="{ xdNavLTextOn: xdNavFalg }">全部心得</div>
          <div class="xdNavLTextImg"></div>
        </div>
        <div class="xdNavR flex" @click="setXdNavFalg(false)">
          <div class="xdNavRText flex" :class="{ xdNavLTextOn: !xdNavFalg }">晒图</div>
        </div>
      </div>
      <div class="xdListBox">
        <template v-for="(v, k) in xdArr">
          <div
            class="xdListItem"
            :key="k + 'xdArr'"
            v-if="xdNavFalg || v.xdImgArr.length"
          >
            <div
              class="xdListItemTopBox b-b-1"
              :class="{ xdListItemTopBoxImgFalgOn: v.xdImgArr.length }"
            >
              <div class="xdListItemTopHBox flex">
                <div class="xdListItemTopHImgBox flex">
                  <img class="xdListItemTopHImg" :src="v.imgUrl" alt="" />
                </div>
                <div class="xdListItemTopHName flex">{{ v.name }}</div>
                <div class="xdListItemTopHTime flex">{{ v.time }}</div>
              </div>
              <p
                class="xdListItemTopP"
                :class="{ xdListItemTopPImgFalgOn: v.xdImgArr.length }"
              >
                {{ v.text }}
              </p>
              <div
                class="xdListItemTopPImgListBox flex"
                :class="{ xdListItemTopPImgListBoxOff: !v.xdImgArr.length }"
              >
                <div
                  class="xdListItemTopPImgBox flex"
                  v-for="(rv, rk) in v.xdImgArr"
                  :key="rk + 'xdImgArr'"
                >
                  <img class="xdListItemTopPImg" :src="rv" alt="" />
                </div>
              </div>
            </div>
            <div class="xdListItembtmBox flex">
              <div class="xdListItembtmImgBox xdListItembtmImg1Box flex">
                <img
                  class="xdListItembtmImg xdListItembtmImg1"
                  :src="v.zanImgUrl"
                  alt=""
                />
                <span class="xdListItembtmText xdListItembtmText1">{{ v.zan }}</span>
              </div>
              <div
                class="xdListItembtmImgBox xdListItembtmImg2Box flex"
                @click="goInfo()"
              >
                <img
                  class="xdListItembtmImg xdListItembtmImg2"
                  :src="v.plImgUrl"
                  alt=""
                />
                <span class="xdListItembtmText xdListItembtmText2">{{ v.pl }}</span>
                <div class="xdListItembtmImgBoxFgL"></div>
                <div class="xdListItembtmImgBoxFgR"></div>
              </div>
              <div class="xdListItembtmImgBox xdListItembtmImg3Box flex">
                <img
                  class="xdListItembtmImg xdListItembtmImg3"
                  :src="v.zfImgUrl"
                  alt=""
                />
                <span class="xdListItembtmText xdListItembtmText3">{{ v.zf }}</span>
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import TopBack from "../TopNav/TopBack";
import FoorX from "../../gj/FoorX";
export default {
  name: "DhwXd",
  data() {
    return {
      xdNavFalg: true,
      xdArr: [
        {
          imgUrl: require("../../../../assets/zfc-img/断货王/商品详情/品牌信息/头像.png"),
          name: "昵称",
          time: "2017-06-28",
          text:
            "该模块主要内容是顾客对购买的商品的评价...该模块主要内容是顾客对购买的商品的评价该模块主要内容是顾客对购买的商品的评价...该模块主要内容是顾客对购买的商品的评价该模块主要内容是顾客对购买的商品的评价...该模块主要内容是顾客对购买的商品的评价",
          xdImgArr: [],
          zanImgUrl: require("../../../../assets/zfc-img/断货王/商品详情/品牌信息/赞.png"),
          zan: "1",
          plImgUrl: require("../../../../assets/zfc-img/断货王/商品详情/品牌信息/评论.png"),
          pl: "10",
          zfImgUrl: require("../../../../assets/zfc-img/断货王/商品详情/品牌信息/分享.png"),
          zf: "26",
        },
        {
          imgUrl: require("../../../../assets/zfc-img/断货王/商品详情/品牌信息/头像.png"),
          name: "昵称",
          time: "2017-06-28",
          text:
            "该模块主要内容是顾客对购买的商品的评价...该模块主要内容是顾客对购买的商品的评价该模块主要内容是顾客对购买的商品的评价...该模块主要内容是顾客对购买的商品的评价该模块主要内容是顾客对购买的商品的评价...该模块主要内容是顾客对购买的商品的评价",
          xdImgArr: [
            require("../../../../assets/zfc-img/断货王/商品详情/品牌信息/心得图片样例.png"),
          ],
          zanImgUrl: require("../../../../assets/zfc-img/断货王/商品详情/品牌信息/赞.png"),
          zan: "1",
          plImgUrl: require("../../../../assets/zfc-img/断货王/商品详情/品牌信息/评论.png"),
          pl: "10",
          zfImgUrl: require("../../../../assets/zfc-img/断货王/商品详情/品牌信息/分享.png"),
          zf: "26",
        },
      ],
    };
  },
  methods: {
    setXdNavFalg(v) {
      this.xdNavFalg = v;
    },
    goInfo() {
      this.$router.push({ name: "DhwXdInfo" });
    },
  },
  components: {
    FoorX,
    TopBack,
  },
};
</script>

<style scoped>
* {
  font-size: 0;
}
.exBox {
  width: 100%;
  background-color: #fff;
  position: relative;
  z-index: 999;
}
.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
.spMsBox {
  margin: 0 0.2rem;
}
.f30c3 {
  font-size: 0.3rem;
  color: #333333;
}
.f30c4c {
  font-size: 0.3rem;
  color: #4c4c4c;
}
.hf30 {
  height: 0.3rem;
  line-height: 0.3rem;
}
.f24c4c {
  font-size: 0.24rem;
  color: #4c4c4c;
}
.b-b-1 {
  border-bottom: 0.01rem solid #cccccc;
}
</style>

<style scoped>
.xdNavBox {
  height: 0.8rem;
}

.xdNavL,
.xdNavR {
  width: 50%;
  height: 100%;
  position: relative;
}
.xdNavLText,
.xdNavRText {
  height: 0.8rem;
  line-height: 0.8rem;
  font-size: 0.3rem;
  color: #4c4c4c;
  border-bottom: 0.02rem solid rgba(0, 0, 0, 0);
}
.xdNavLTextOn {
  border-bottom: 0.02rem solid #e53e42;
}
.xdNavLTextImg {
  width: 0.02rem;
  height: 0.6rem;
  background-color: #cccccc;
  position: absolute;
  top: 0.1rem;
  right: -0.01rem;
}
/* 心得部分 */
.xdListItemTopBox {
  height: 2.18rem;
  padding: 0 0.2rem;
  padding-top: 0.2rem;
}
.xdListItemTopBoxImgFalgOn {
  height: auto;
}
.xdListItemTopHBox {
  height: 0.8rem;
  margin-bottom: 0.14rem;
  justify-content: flex-start;
  position: relative;
}
.xdListItemTopHImgBox {
  width: 0.78rem;
  height: 0.78rem;
  margin-right: 0.15rem;
  border: 0.01rem solid #cdcdcd;
  border-radius: 50%;
}
.xdListItemTopHName {
  height: 100%;
  font-size: 0.28rem;
  color: #4c4c4c;
  justify-content: flex-start;
}
.xdListItemTopHTime {
  height: 100%;
  font-size: 0.24rem;
  color: #808080;
  justify-content: flex-end;
  position: absolute;
  top: 0;
  right: 0;
}
.xdListItemTopP {
  height: 0.72rem;
  line-height: 0.36rem;
  font-size: 0.24rem;
  color: #cdcdcd;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.xdListItemTopPImgFalgOn {
  margin-bottom: 0.12rem;
}
.xdListItembtmBox {
  height: 0.81rem;
  padding: 0 0.2rem;
  border-bottom: 0.2rem solid #f2f2f2;
}
.xdListItembtmBox:nth-last-of-type(1) {
  border-bottom: none;
}
.xdListItembtmImgBox {
  width: calc(100% / 3);
  height: 100%;
  position: relative;
}
.xdListItembtmImg {
  margin-right: 0.2rem;
}
.xdListItembtmText {
  font-size: 0.24rem;
  color: #808080;
}
.xdListItembtmImgBoxFgL,
.xdListItembtmImgBoxFgR {
  width: 0.02rem;
  height: 0.4rem;
  background-color: #cccccc;
  position: absolute;
  top: 0.2rem;
}
.xdListItembtmImgBoxFgL {
  left: -0.01rem;
}
.xdListItembtmImgBoxFgR {
  right: -0.01rem;
}
.xdListItemTopPImgListBox {
  height: 2rem;
  margin-bottom: 0.22rem;
  justify-content: flex-start;
}
.xdListItemTopPImgListBoxOff {
  display: none;
}
.xdListItemTopPImgBox {
  width: 2.58rem;
  height: 1.98rem;
  border: 0.01rem solid #cccccc;
}
</style>
